<template>
  <div class="order-detail">
    <el-table
      class="settle-table"
      :data="goodsList"
      border
      max-height="310"
      show-summary
      :summary-method="getSummaries"
      :span-method="objectSpanMethod"
    >
      <el-table-column key="number" prop="number" label="图录号" align="center" width="75" />
      <el-table-column v-if="!!goodsList[0].name" key="name" prop="name" label="拍品名" align="center" min-width="115" show-overflow-tooltip />
      <el-table-column key="final_price" prop="final_price" label="成交价" align="center" min-width="100" />
      <el-table-column key="fee_rate" prop="fee_rate" label="手续费率" align="center" width="80" />
      <el-table-column key="fee" prop="fee" label="手续费" align="center" min-width="100" />
      <el-table-column key="tax_rate" prop="tax_rate" label="税收率" align="center" width="70" />
      <el-table-column key="tax" prop="tax" label="税费" align="center" min-width="100" />
      <el-table-column v-if="type === 'buy'" key="postage" prop="postage" label="邮寄费" align="center" min-width="90" />
      <el-table-column v-if="type === 'send'" key="catafee" prop="catafee" label="图录费" align="center" width="90" />
      <el-table-column key="sum" prop="sum" :label="type === 'send' ? '结算金额':'应收金额'" min-width="120" align="right" fixed="right" />
    </el-table>
  </div>
</template>

<script>
import { toThousands } from '@/utils'

export default {
  name: 'OrderTable',
  props: {
    type: {
      type: String,
      default: 'buy'
    },
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toThousands,
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property !== 'fee_rate' && column.property !== 'tax_rate' && column.property !== 'name') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (column.property === 'sum') {
            sums[index] = this.toThousands(sums[index])
          }
        } else {
          sums[index] = '-'
        }
      })
      return sums
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'fee_rate' && column.property === 'tax_rate') {
        if (rowIndex === 0) {
          return {
            rowspan: this.goodsList.length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-table {
  width: 100%;
}
/deep/.el-table__footer {
  tbody tr {
    td:last-of-type {
      color: #c20625;
      font-weight: bold;
    }
  }
}
</style>
